<template>
  <!--底部滚动区域-->
  <div :class="index % 2 == 0 ? 'scrollItem' : 'scrollActive'">
    <div class="topPartContainer" style="color:#dcdfe6;font-weight:700">{{ index + 1 }}.{{name}}</div>
    <div class="bottomPartContainer">
      <div class="progressContainer">
        <!--进度条-->
        <div :class="index % 2 == 0 ? 'progress' : 'progressActive'" ref="progress"></div>
      </div>
      <div class="num" style="font-weight:700">{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
    },
    num: {
      type: Number,
    },
    name:{
      type:String
    }
  },
  data() {
    return {
        
    };
  },
  mounted() {
      this.changeProgress()
  },
  methods: {
      changeProgress(){
          this.$refs.progress.style.width = this.num+'%'
      }
  },
};
</script>

<style lang="scss" scoped>
.scrollItem,
.scrollActive {
  width: 90%;
  height: 21%;
  margin: 3px 0 10px 20px;
  .bottomPartContainer {
    width: 100%;
    padding-left: 10px;
    margin-top: 5px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .progressContainer {
      width: 90%;
      height: 70%;
      border-radius: 10px;
      background-color: #1d1b5a;
      .progress,
      .progressActive {
        margin-top: 1px;
        height: 90%;
        width: 30%;
        border-radius: 10px;
      }
      .progress {
        background-color: #1a9ffc;
      }
      .progressActive {
        background-color: #22dee0;
      }
    }
  }
}
</style>